

import { useState } from 'react';
import { getData2 } from '../Data'
import { useMount, useReactive } from 'ahooks';
import { FlexGrid, FlexGridColumn } from "@grapecity/wijmo.react.grid";
import { Switch } from 'antd';

const WijmoF01 = () => {
    const InitData = useReactive({ quickEdit: false })

    const [Data, setData] = useState()
    useMount(() => { setData(getData2(100)) })

    const init = (init) => {
        init.beginningEdit.addHandler((_, e) => {
            // 阻止编辑
            let item = e.getRow().dataItem, binding = e.getColumn().binding;
            if (item.state && binding !== 'state') {
                e.cancel = true
            }
            // 快速编辑
            // && e.data.type === 'keypress' && !InitData.quickEdit) 
        })
    }


    if (Data) {
        return (
            <div className="Page">
                <FlexGrid itemsSource={Data} initialized={init} >
                    <FlexGridColumn binding="id" header="ID" width={50} isReadOnly={true} />
                    <FlexGridColumn binding="country" header="Country" isRequired={true} />
                    <FlexGridColumn binding="sales" header="Sales" isRequired={false} />
                    <FlexGridColumn binding="expenses" header="Expenses" isRequired={false} />
                    <FlexGridColumn binding="state" header="state" />
                </FlexGrid>
                <div>快速编辑 : <Switch defaultChecked={InitData.quickEdit} onChange={e => InitData.quickEdit = e} /></div>

            </div>
        )
    }
};

export default WijmoF01;